<!--
 * @Author: malgee
 * @Date: 2025-04-27 09:09:25
 * @LastEditors: maling
 * @LastEditTime: 2025-04-27 13:23:48
 * @FilePath: /vue3-ts-cms/src/base-ui/breadcrumb/src/bread-crumb.vue
 * @Description: 面包屑组件
 * 
-->
 
<template>
  <div class="nav-breadcrumb">
    <el-breadcrumb separator="/">
      <template v-for="item in props.breadcrumbList" :key="item.id">
        <el-breadcrumb-item :to="{path: item.path || ''}">{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { defineProps, watch, PropType } from 'vue'
import { IBreadcrumb } from '../types'

// 如果传递多个属性
const props = defineProps({
  breadcrumbList: {
    type: Array as PropType<IBreadcrumb[]>,
    required: true
  }
})


watch(() => props.breadcrumbList, () => {
  console.log('breadcrumbList changed', props.breadcrumbList)
})


</script>

<style lang="less" scoped>

.nav-breadcrumb {
  // background-color: aqua;
  // width: 200px;

}


</style>